
var jsDataView = {
   
   /**
    * This object will contain the various viewers for each data type
    */
   viewers: {},
   
   /**
    * Generates the DOM for any kind of data
    */
   generateViewer: function(data, options) {
      var type = this.getType(data);
      return jsDataView.viewers[type](data, options);
   },
   
   
   /**
    * Type can be any of the following :
    *    array <= added
    *    date <= added
    *    domEl <= added
    *    null <= added
    *    number
    *    string
    *    boolean
    *    object
    *    function
    *    undefined
    */
   getType: function(data) {
      
      var type = typeof data;
      
      if(type == 'object') {
         
         if(data === null) {
            return 'null';
         }
         
         if(!!data.length && !!data.splice && typeof data.length == 'number' && typeof data.splice == 'function' ) {
            return 'array';
         }
      
         if(!!data.getFullYear && typeof data.getFullYear == 'function' ) {
            return 'date';
         }
      
         if(!!data.ownerDocument && typeof data.ownerDocument == 'object') {
            return 'domEl';
         }
      }
      
      return type;
   }
};




/**
 * OBJECT
 */
jsDataView.viewers["object"] = function(data, options) {
   
   var objectDiv = inputEx.cn('div', null, null, "Object :");
   
   for(var key in data) {
      if(data.hasOwnProperty(key)) {
         var elementDiv = inputEx.cn('div', null,  {marginLeft: '10px'}, key+': ');
         elementDiv.appendChild(jsDataView.generateViewer(data[key], options));
         objectDiv.appendChild(elementDiv);
      }
   }
   
   return objectDiv;
};


/**
 * ARRAY
 */
jsDataView.viewers["array"] = function(data, options) {
   
   var arrayDiv = inputEx.cn('div', null, null, "Array :");
   
   for(var i = 0 ; i < data.length ; i++) {
      var elementDiv = inputEx.cn('div', null, {marginLeft: '10px'}, i+': ');
      elementDiv.appendChild(jsDataView.generateViewer(data[i], options));
      arrayDiv.appendChild(elementDiv);
   }
   
   return arrayDiv;
};


/**
 * Date
 */
jsDataView.viewers["date"] = function(data, options) {
   return inputEx.cn('span', null, {fontStyle: 'italic'}, data);
};


/**
 * Date
 */
jsDataView.viewers["domEl"] = function(data, options) {
   return inputEx.cn('span', null, {fontStyle: 'italic'}, "DOM element ("+data.tagName+")");
};


/**
 * NUMBER
 */
jsDataView.viewers["number"] = function(data, options) {
   return inputEx.cn('span', null, {fontStyle: 'italic'}, data);
};


/**
 * STRING
 */
jsDataView.viewers["string"] = function(data, options) {
   return inputEx.cn('span', null, {fontStyle: 'italic'}, data);
};


/**
 * BOOLEAN
 */
jsDataView.viewers["boolean"] = function(data, options) {
   return inputEx.cn('span', null, {fontStyle: 'italic'}, data ? 'true' : 'false');
};



/**
 * FUNCTION
 */
jsDataView.viewers["function"] = function(data, options) {
   return inputEx.cn('span', null, {fontStyle: 'italic'}, 'function');
};


/**
 * UNDEFINED
 */
jsDataView.viewers["undefined"] = function(data, options) {
   return inputEx.cn('span', null, {fontStyle: 'italic'}, 'undefined');
};


/**
 * NULL
 */
jsDataView.viewers["null"] = function(data, options) {
   return inputEx.cn('span', null, {fontStyle: 'italic'}, 'null');
};